<template>
  <div class="bbs-main">
    <el-empty v-show="tableData.length == 0" description="暂无话题"></el-empty>
    <div class="topic-item" v-for="item in tableData" :key="item.id">
      <div class="avatar" @click="handleHomepage(item)">
        <el-avatar :size="60" :src="headImg(item.sysUser)"></el-avatar>
      </div>
      <div class="topic-content">
        <div class="topic-info">
          <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="20">
              <el-tag size="mini" effect="plain" v-if="item.classifyId">
                {{ item.sysClassify.name }}
              </el-tag>
              <span class="user-name">{{ item.sysUser.userName }}</span>
              <span>发表时间：{{ item.createTime }}</span>
            </el-col>
            <el-col :span="4" class="statistics">
              <span class="el-icon-view" title="浏览数">
                {{ item.clickCount }}
              </span>
              <span class="el-icon-star-off" title="收藏数">
                {{ item.collectCount }}
              </span>
              <span class="el-icon-thumb" title="点赞数">
                {{ item.likeCount }}
              </span>
            </el-col>
          </el-row>
        </div>
        <div class="topic-title">
          <h2 @click="handleDetail(item)">{{ item.title }}</h2>
          <el-tag
            class="tag"
            size="mini"
            effect="dark"
            type="danger"
            v-if="item.orderBy != 0"
            >置顶</el-tag
          >
          <el-tag
            class="tag"
            size="mini"
            effect="dark"
            type="warning"
            v-if="item.selection != 0"
            >精选</el-tag
          >
        </div>
        <div class="topic-detail" @click="handleDetail(item)">
          <div>{{ abstract(item.contents) }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo'
export default {
  mixins: [setInfo],
  data() {
    return {}
  },
  computed: {
    abstract() {
      return (val) => {
        return (
          val
            .replace(/&nbsp;/gi, '') //清除空格
            .replace(/\s+style="[^"]*"/g, '') //清除style样式
            .replace(/\<img/gi, '<img style="display: none;"') //设置图片class
            .replace(/(<([^>]+)>)/gi, '') //去除HTML标签
            .substring(0, 150) + '...'
        )
      }
    },
  },
  props: ['tableData'],
  mounted() {},
  methods: {
    handleDetail(row) {
      const URL = this.$router.resolve({
        name: 'bbs-detail',
        query: { id: row.id },
      })
      window.open(URL.href, '_blank')
    },
    handleHomepage(item) {
      const URL = this.$router.resolve({
        name: 'bbs-homepage',
        query: { id: item.sysUser.id },
      })
      window.open(URL.href, '_blank')
    },
  },
}
</script>
<style scoped lang="scss">
.bbs-main {
  min-height: 600px;
}
.topic-item {
  margin: 10px 0;
  position: relative;
  clear: both;
  border-bottom: 1px solid #f2f2f2;
  .avatar {
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
    width: 80px;
    cursor: pointer;
  }
  .topic-content {
    padding: 0px 10px 10px 90px;
    min-height: 80px;
    box-sizing: border-box;
    .topic-info {
      color: #c9cdd4;
      font-size: 14px;
      line-height: 22px;
      span {
        margin-right: 10px;
      }
      .user-name {
        color: #86909c;
      }
      .statistics {
        text-align: right;
        span {
          color: #999;
        }
      }
    }
    .topic-title {
      margin-top: 5px;
      h2 {
        color: #272e3b;
        font-size: 18px;
        line-height: 32px;
        font-weight: normal;
        display: inline-block;
        cursor: pointer;
        &:hover {
          color: var(--colorH1);
        }
      }
      .tag {
        margin-left: 10px;
      }
    }
    .topic-detail {
      // margin: 0px 50px 0 0;
      font-size: 15px;
      line-height: 28px;
      font-weight: normal;
      text-decoration: none;
      color: #86909c;
      cursor: pointer;
      text-align: justify;
    }
  }
}
</style>